<template>
	<view class="page-total">
		<!-- 分类列表 -->
		<view class="classify-list">
			<view class="list" @click="onSkip('classify')">
				<view class="thumb">
					<image src="https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg"></image>
				</view>
				<view class="name"><text class="one-omit">小米</text></view>
			</view>

			<view class="list" @click="onSkip('classify')">
				<view class="thumb">
					<image src="https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg"></image>
				</view>
				<view class="name"><text class="one-omit">vivo</text></view>
			</view>
		</view>
		<!-- 超值爆款 -->
		<view class="super-hot-style">
			<view class="hot-title">
				<view class="iconfont icon-zhizi"></view>
				<view class="title">超值爆款</view>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item, index) in classGoodsList" @click="onSkip('goods')" :key="index">
					<view class="thumb">
						<image :src="item.img" mode="widthFix"></image>
					</view>
					<view class="title"><text class="one-omit">{{item.name}}</text></view>
					<view class="price">
						<view class="retail-price">
							<text class="min">￥</text>
							<text class="max">{{item.price}}</text>
						</view>
						<view class="sales-volume">已售4件</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 更多热卖 -->
		<view class="more-hot">
			<view class="hot-title">
				<view class="title">
					<text class="iconfont icon-xiedian"></text>
					<text class="icon">更多热卖</text>
					<text class="iconfont icon-xiedian"></text>
				</view>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in goodsList" @click="onSkip('goods')" :key="index">
					<view class="pictrue">
						<image :src="item.img" mode="heightFix"></image>
					</view>
					<view class="title-tag">
						<view class="tag">
							<text v-if="item.is_goods === 1">特价</text>
							{{item.name}}
						</view>
					</view>
					<view class="price-info">
						<view class="user-price">
							<text class="min">￥</text>
							<text class="max">{{item.price}}</text>
						</view>
						<view class="vip-price">
							<image src=""></image>
							<text>￥{{item.vip_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [{
					id: 1,
					name: '雪域森林短袖T恤男装2020夏季潮流时尚衣服男潮牌圆领印花宽松T恤半袖男 20855橙色 XL',
					price: '68.00',
					vip_price: '36.00',
					img: 'https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg',
					is_goods: 0,
				}],
				classGoodsList: [

				]
			};
		},
		methods: {
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'classify':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList',
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}
		}
	};
</script>

<style lang="scss">
	@import 'ClassifyData.scss';
</style>